<template>
  <div class="_wz_cent_main _wz_dynamicMonitoring">
    <Row :gutter="10" style="height:280px;">
      <i-col span="6" style="height: 100%;">
        <Card dis-hover shadow style="height: 100%;">
          <p slot="title">今日运营统计</p>
          <div style="height:100%;" ref="bingTuHeight">
            <bingTu :topHeight="bingTuHeight" v-if="bingTuHeight != 0 && driverAuth.driverAuthType" :bingTuData="driverAuth"></bingTu>
          </div>
        </Card>
      </i-col>
      <i-col span="6" style="height: 100%;">
        <Card dis-hover shadow style="height: 100%;">
          <p slot="title">今日报警统计</p>
          <div style="background: #fff;height: 100%;">
            <Row :gutter="10" style="height:140px;padding: 60px 0 20px;">
              <i-col span="12" style="border-right: 1px solid #e8eaec;text-align: right;padding: 0 20px 0 0;">
                <div style="font-size: 18px;">{{ !!monitorStatistics.alarmStatistics?monitorStatistics.alarmStatistics.fatigueAlarmCount:0 }}</div>
                <div style="color: #2d8cf0;line-height: 30px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">疲劳报警</div>
              </i-col>
              <i-col span="12" style="text-align: left;padding: 0 0 0 20px;">
                <div style="font-size: 18px;">{{ !!monitorStatistics.alarmStatistics?monitorStatistics.alarmStatistics.speedAlarmCount:0 }}</div>
                <div style="color: #19be6b;line-height: 30px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">超速报警</div>
              </i-col>
            </Row>
            <div style="text-align: center;margin-top: 15px;font-size: 12px">
              <span style="color: #a1a1a1;margin: 0 10px 0;">报警总数:<span style="margin-left: 5px;color: #ed4014;font-size: 16px;font-weight: 900;margin: 0 5px;">{{ !!monitorStatistics.alarmStatistics?monitorStatistics.alarmStatistics.alarmCount:0 }}</span>次</span>
              <span style="color: #a1a1a1;">报警车辆:<span style="margin-left: 5px;color: #ed4014;font-size: 16px;font-weight: 900;margin: 0 5px;">{{ !!monitorStatistics.alarmStatistics?monitorStatistics.alarmStatistics.vehicleCount:0 }}</span>辆</span>
            </div>
          </div>
        </Card>
      </i-col>
      <i-col span="6" style="height: 100%;">
        <Card dis-hover shadow style="height: 100%;">
          <p slot="title">今日报警类型统计</p>
          <div style="height:100%;">
            <bingTu :topHeight="bingTuHeight" v-if="bingTuHeight != 0 && driverAuth1.driverAuthType" :bingTuData="driverAuth1"></bingTu>
          </div>
        </Card>
      </i-col>
      <i-col span="6" style="height: 100%;">
        <Card dis-hover shadow style="height: 100%;">
          <p slot="title">近7天报警车辆排名前五</p>
          <div style="height:100%;">
            <div id="container" style="height:100%;overflow: hidden;"></div>
          </div>
        </Card>
      </i-col>
    </Row>
    <Row :gutter="10" style="margin: 10px 0 0 0;height: calc(100% - 280px - 10px);">
      <i-col span="12" style="height: 100%;">
        <div style="height: calc((100% - 10px) / 2);margin: 0 0 10px 0;">
          <Card dis-hover shadow style="height: 100%;">
            <p slot="title">近日报警次数统计</p>
            <div style="height: 100%;" ref="lineChart2Height">
              <lineChart2 :bottomHeight="lineChart2Height" v-if="lineChart2Height != 0 && lineChart2Data1.type" :lineChart2Data="lineChart2Data1"></lineChart2>
            </div>
          </Card>
        </div>

        <div style="height: calc((100% - 10px) / 2);">
          <Card dis-hover shadow style="height: 100%;">
            <p slot="title">近日运营车辆统计</p>
            <div style="height:100%;">
              <regionalDiscount :leftHeight="lineChart2Height" v-if="lineChart2Height != 0 && homeAnalysisLoanMonthNum.type" :homeAnalysisLoanMonthNum="homeAnalysisLoanMonthNum"></regionalDiscount>
            </div>
          </Card>
        </div>
      </i-col>
      <i-col span="12" style="height: 100%;padding-right: 0px;">
        <Card dis-hover shadow style="height: 100%;">
          <p slot="title">今日报警车辆位置</p>
          <div style="height: 100%;position: relative;">
            <div style="height: 100%;" id="_wz_vehicleMonitoring_allmap"></div>
            <div style="position:absolute;bottom: 0px;width: 100%;left: 0px;background: rgba(0,0,0,0.8);text-align: right;color: #fff;line-height: 40px;">
              <span style="margin: 0 5px;"><img src="../../../assets/bj.png"  style="margin: 0 3px;vertical-align:text-bottom;height:17px;">超速报警</span>
              <span style="margin: 0 5px;"><img src="../../../assets/qtbj.png"  style="margin: 0 3px;vertical-align:text-bottom;height:17px;">疲劳报警</span>
            </div>
          </div>
        </Card>
      </i-col>
    </Row>


    <Spin size="large" fix v-if="spinShow"></Spin>

  </div>
</template>
<script>
import regionalDiscount from "../../../components/Chart/lineChart/regionalDiscount";
import lineChart2 from "../../../components/Chart/lineChart/lineChart2";
import lineChart6 from '../../../components/Chart/lineChart/lineChart6.vue'
import bingTu from "../../../components/Chart/lineChart/bingTu";

export default {
  components: {
    lineChart2,
    regionalDiscount,
    lineChart6,
    bingTu,
  },
  data() {
    return {
      spinShow: false,//本页加载
      monitorStatistics:{},
      lineChart2Height:0,
      bingTuHeight:0,
      markers: [],//地图标记物数组
      BMapWz: [],//地图一屏展示使用

      driverAuth: {//运营
        "id": "driverAuth",
        "data": [],
        "unit": "辆",
        "style": {
          "padding": [20, 20, 50, 20]
        },
        driverAuthType: false,
      },
      driverAuth1: {//报警类型
        "id": "driverAuth1",
        "data": [
          {'item': '疲劳报警', "percent": 1},
          {'item': '超速报警', "percent": 2},
        ],
        "unit": "次",
        "style": {
          "padding": [20, 20, 50, 20]
        },
        driverAuthType: false,
      },

      lineChart2Data1: {
        type: false,
        "id": "charId1",
        "data": [],
        "unit": "",
        "style": {
          "padding": [20, 30, 30, 40]
        }
      },

      homeAnalysisLoanMonthNum: {//
        "id": "homeAnalysisLoanMonthNumId",
        "data": [],
        "unit": "单位（辆）",
        "style": {
          "padding": [20, 20, 30, 50]
        },
        list:true,
        type: false,
      },
    }
  },
  computed: {//计算属性

  },
  beforeCreate() {//beforeCreate创建前状态

  },
  created() {//created创建完毕状态

  },
  beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

  },
  mounted() {//mounted 挂载结束状态
    var that = this;
    // that.spinShow = true;bingTuHeight
    that.$nextTick(function () {
      that.bingTuHeight = that.$refs.bingTuHeight.offsetHeight;
      that.lineChart2Height = that.$refs.lineChart2Height.offsetHeight;

      window.onresize = function () {
        that.bingTuHeight = that.$refs.bingTuHeight.offsetHeight;
        that.lineChart2Height = that.$refs.lineChart2Height.offsetHeight;
      };
    })

    that.map = new BMap.Map("_wz_vehicleMonitoring_allmap");    // 创建Map实例
    that.map.centerAndZoom(new BMap.Point(105.058886,36.028623), 4);  // 初始化地图,设置中心点坐标和地图级别
    //添加地图类型控件
    that.map.addControl(new BMap.MapTypeControl({
      mapTypes: [
        BMAP_NORMAL_MAP,
        BMAP_HYBRID_MAP
      ]
    }));
    that.map.setCurrentCity("邢台");          // 设置地图显示的城市 此项是必须设置的
    that.map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
    // 左上角，添加比例尺
    let top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});
    that.map.addControl(top_left_control);
    //左上角，添加默认缩放平移控件    billUnfinishedPosition
    let top_left_navigation = new BMap.NavigationControl();
    that.map.addControl(top_left_navigation);


    that.spinShow = true;
    that.axios.post(that.apiUrl.webApi + "/statistics/pc/monitorStatistics", {}).then(res => {
      that.spinShow = false;
      if (!!res) {
        that.monitorStatistics = res.data.data;

        //营运
        var operateVehicleMonthStatistics = [];
        res.data.data.operateVehicleMonthStatistics.forEach((k, i) => {
          operateVehicleMonthStatistics.push({'year': k.name,"value": k.value });
        })
        that.homeAnalysisLoanMonthNum.data = operateVehicleMonthStatistics;
        that.homeAnalysisLoanMonthNum.type = true;



        //报警
        var alarmMonthStatistics = [];
        res.data.data.alarmMonthStatistics.forEach((k, i) => {
          alarmMonthStatistics.push({month: k.name,city: '报警趋势',temperature: k.value});
        })
        that.lineChart2Data1.data = alarmMonthStatistics;
        that.lineChart2Data1.type = true;

        //报警类型
        that.driverAuth1.data = [
          {'item': '疲劳报警', "percent": that.monitorStatistics.alarmStatistics.fatigueAlarmCount},
          {'item': '超速报警', "percent": that.monitorStatistics.alarmStatistics.speedAlarmCount},
        ];
        that.driverAuth1.driverAuthType = true;


        //营运
        that.driverAuth.data = [
          {'item': '实时在线', "percent": that.monitorStatistics.operateStatistics.realOnlineNumber},
          {'item': '今日在线', "percent": that.monitorStatistics.operateStatistics.todayOnlineNumber},
        ];
        that.driverAuth.driverAuthType = true;



        that.aaa();
        that.mapRendering();



      }
    }).catch(err => {
      console.log("失败", err)
    })


  },
  methods: {//执行的方法
    mapRendering(){
      var that = this;
      that.monitorStatistics.alarmStatistics.vehicleAlarm.forEach(function (k, i) {
        if (!!k.lonX && k.lonX.length > 0 && k.lonX != null && !!k.latY && k.latY.length > 0 && k.latY != null) {
          let myIcon;
          if(k.warnType == 1){//超速报警
            myIcon = new BMap.Icon("../../static/img/vehicleImg/bj.png", new BMap.Size(15, 17));
          }else{//疲劳报警
            myIcon = new BMap.Icon("../../static/img/vehicleImg/qtbj.png", new BMap.Size(15, 17));
          }

          let marker = new BMap.Marker(new BMap.Point(k.lonX, k.latY), {
            icon: myIcon,
            title: k.carPlateNo
          });  // 创建标注
          marker.setRotation(k.direction);


          marker.addEventListener('click', function () {
            // 创建信息窗口
            var opts = {
              width: 200,
              title: k.vehiclePlateNumber
            };
            var data = k;
            var html = '<div>' +
              '<div>行驶速度：' + data.warnSpeed + '</div>' +
              '<div>报警类型： ' + data.infoContent +'</div>'+
              '<div>定位时间：' + data.warnTime + '</div>'+
              '<div>定位地址：' + data.location + '</div>'+
              '</div>';
            var infoWindow = new BMap.InfoWindow(html, opts);
            that.map.openInfoWindow(infoWindow, new BMap.Point(k.lonX, k.latY)); // 开启信息窗口
          });



          that.map.addOverlay(marker);            //增加点
          // that.map.centerAndZoom(new BMap.Point(data.lonX, data.latY), 8);  // 初始化地图,设置中心点坐标和地图级别
          // that.markers.push(marker);
          that.BMapWz.push(new BMap.Point(k.lonX, k.latY));//一屏显示用

        }
      })

      // //坐标自动展示所有的坐标  一平显示
      that.map.setViewport(that.BMapWz);
    },
    aaa() {
      var that = this;

      var data = that.monitorStatistics.alarmVehicleStatistics;

      var hang = 0;
      data.forEach((k, i) => {
        hang = hang + k.alarmNumber;
      })
      that.coreDriverStatisticsTotal = hang;

      data.sort(function (a, b) {
        return a.alarmNumber - b.alarmNumber;
      });
      data = data.slice((data.length - 6),(data.length - 1));


      const chart = new G2.Chart({
        container: 'container',
        forceFit: true,
        height: that.bingTuHeight,
        padding: [30, 30, 40, 80]
      });
      chart.source(data, {
        alarmNumber: {
          nice: false,
          alias: '报警（数量）'
        }
      });
      chart.axis('vehiclePlate', {
        label: {
          textStyle: {
            fill: '#8d8d8d',
            fontSize: 12
          }
        },
        tickLine: {
          alignWithLabel: false,
          length: 0
        },
        line: {
          lineWidth: 0
        }
      });
      chart.axis('alarmNumber', {
        label: null,
        title: {
          offset: 10,
          textStyle: {
            fontSize: 12,
            fontWeight: 300
          }
        }
      });
      chart.legend(false);
      chart.coord().transpose();
      chart.interval().position('vehiclePlate*alarmNumber').size(6)
      .opacity(1)
      .label('alarmNumber', {
        textStyle: {
          fill: '#8d8d8d'
        },
        offset: 10
      });
      chart.render();


    },
  },
  watch: {//监听
  },
  props: {//接收来自父组件的数据

  },
  beforeUpdate() {//beforeUpdate 更新前状态

  },
  updated() {//updated 更新完成状态

  },
  beforeDestroy() {//beforeDestroy 销毁前状态

  },
  destroyed() {//destroyed 销毁完成状态
    window.onresize = null;
  }
}
</script>
<style lang="less">
._wz_dynamicMonitoring {

  height: 843px !important;

  .ivu-card-body {
    padding: 8px !important;
    height: calc(100% - 51px);
  }
}
</style>
